<template>
	<div>
			<div class="banner" @click="handleGallaryClick" >
				<div class="header">
					<img :src='bannerImg' class="banner-img"/>
					<div class="info">
						<div class="left">{{sightName}}</div>
						<div class="right iconfont">&#xe608; {{this.gallaryImgs.length}}</div>
					</div>
				</div>
			</div>
		<fade>
			<Gallary :img='img' v-show="gallaryShow" @showClick='handleClick'></Gallary>
		</fade>
	</div>
</template>

<script>
import Gallary from 'common/gallary/Gallary'
import fade from 'common/fade/animation'		
export default {
	name: 'DetailBanner',
	props: {
		bannerImg: String,
		gallaryImgs: Array,
		sightName: String
	},
	data () {
		return {
			img: this.gallaryImgs,
			gallaryShow: false
		}
	},
	components: {
		Gallary,
		fade
	},
	methods: {
		handleGallaryClick () {
			this.gallaryShow = true
		},
		handleClick () {
			this.gallaryShow = false
		}
	}
}	
</script>

<style lang="stylus" scoped>
	.header
		height: 0
		width: 100%
		padding-bottom: 55%
		position: relative
		.banner-img
			width: 100%
		.info	
			position: absolute
			left: 0
			right: 0
			bottom: 0
			line-height: .68rem
			display: flex
			color: #fff
			padding: 0 .2rem
			background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8))
			.left
				flex: 1
				font-size: .4rem
			.right
				height: .48rem
				line-height: .48rem
				margin: .1rem
				background: rgba(0, 0, 0, .8)
				padding: 0 .1rem
				border-radius: .2rem
				font-size: .24rem



</style>